<template>
  <div class="gamecurrencydiff-detail">
    <Row type="flex"
         justify="space-between"
         class="gamecurrencydiff-detailt-edit">
      <Form style="width: 100%"
            class="from"
            label-position="left"
            inline>
        <Row type="flex"
             justify="start">
          <Col span="6">
          <Row type="flex"
               justify="start"
               inline>
            <Col>
            <div class="list-title">
              <span></span>
              <h3>{{title}}</h3>
            </div>
            </Col>
          </Row>
          </Col>
          <Col span="18">
          <Row type="flex"
               justify="end">
            <Col>
            <FormItem :label-width="48">
              <div slot="label"
                   style="transform: translateX(12px);">时间：</div>
              <span>{{ dayjs($route.params.startTime).format('YYYY-MM') }}</span>
              <!-- <span>{{ $route.params.endTime }}</span> -->
              <span></span>
            </FormItem>

            <FormItem :label-width="72">
              <div slot="label"
                   style="transform: translateX(12px);">门店名称：</div>
              <span>{{ $route.params.shopName }}</span>

            </FormItem>

            <FormItem v-if="hasPermission('moms:report:coindiffanalyticsexport')"
                      :label-width="20">
              <Button @click="exportExcl"
                      type="primary">
                导出
              </Button>
            </FormItem>
            </Col>
          </Row>

          </Col>
        </Row>
      </Form>
    </Row>
    <!-- :loading="isloading" -->
    <Table :max-height=" resData.length > 10 ? 538 : 0"
           :loading="isloading"
           border
           stripe
           :columns="columns"
           :data="resData"></Table>
    <div class="page-box"
         style="margin-top: 20px">
      <Page :total="page.total"
            :current.sync="page.pageIndex"
            :page-size="page.limit"
            @on-change="handlePage"
            @on-page-size-change="handlePageSize"
            show-sizer
            show-total />
    </div>
    <down-center ref="downCenterRef"
                 perms="moms:report:coindiffanalytics"
                 v-if="hasPermission('moms:report:coindiffanalyticsexport')"></down-center>
  </div>
</template>
<script>
// import { rowSpanTable, formatRowspanData } from '@/libs/rowspan'
// import { newShopPage } from '@/api/report/shop'
// import { blobToXls } from '@/libs/blobToXls'
import dayjs from 'dayjs'
import {
  // coinDeviceDetailExport,
  coinDeviceDetail,
  coinSaleDetail,
  // coinSaleDetailExport,
  coinMemberDetail
  // coinMemberDetailExport
} from '@/api/report/finance'
import errorCaptured from '@/libs/errorCaptured'
// import { formatAmount } from '@/libs/tools'
import datePickerYmd from '@/components/date-picker-ymd/date-picker-ymd.vue'
import vueTreeselectChoice from '@/components/vue-treeselect-choice'
import { mapState, mapMutations } from 'vuex'
import { cloneObj } from '@/libs/cloneObj'
import DownCenter from '@/view/components/down-center/index.vue'
export default {
  name: 'report_finance_gamecurrencydiff_detail',
  components: {
    datePickerYmd,
    vueTreeselectChoice,
    DownCenter
    // vueTreeselectShop
  },
  data () {
    return {
      shopList: [],
      ShopValue: [],
      dayjs: dayjs,
      total: 0,
      radioOption: [
        { key: 'member', value: '会员资产' },
        { key: 'device', value: '硬件设备' },
        { key: 'sales', value: '销售核对' }
      ],
      menu: 'member',
      isloading: false,
      bottonActive: '日',
      timeDate: [dayjs().format('YYYY-MM-DD 00:00:00'), dayjs().format('YYYY-MM-DD 00:00:00')],
      selectDateType: 'daterange',
      page: {
        total: 0,
        limit: 10,
        offset: 0,
        pageINdex: 1
      },
      searchObj: {
        // shopIds: [],
        merchantId: this.$store.state.user.merchantId
      },

      memberColumns: [
        { title: '日期', key: 'statDate', align: 'center' },
        { title: '期初存币数(枚)', key: 'lastDepositNum', align: 'center' },
        { title: '售赠币数(枚)', key: 'coinGiftNum', align: 'center' },
        { title: '期末存币数(枚)', key: 'depositNum', align: 'center' },
        { title: '机台收回币数(枚)', key: 'machineReceiveNum', align: 'center' },
        { title: '偏差数(枚)', key: 'deviation', align: 'center' }
      ],
      deviceColumns: [
        { title: '日期', key: 'statDate', align: 'center' },
        { title: '电子取币数(枚)', key: 'withdrawEcoinNum', align: 'center' },
        { title: '实体取币数(枚)', key: 'withdrawCoinNum', align: 'center' },
        { title: '电子退币数(枚)', key: 'outEcoinNum', align: 'center' },
        { title: '实体退币数(枚)', key: 'outCoinNum', align: 'center' },
        { title: '机台回收数(枚)', key: 'machineReceiveNum', align: 'center' },
        { title: '偏差数(枚)', key: 'deviation', align: 'center' }
      ],
      salesColumns: [
        { title: '日期', key: 'statDate', align: 'center' },
        { title: '期末结存数(枚)', key: 'depositNum', align: 'center' },
        { title: '期末存币总数(枚)', key: 'depositSumNum', align: 'center' },
        { title: '偏差数(枚)', key: 'diffNum', align: 'center' }
      ],
      resData: []
    }
  },
  computed: {
    ...mapState({
      tagNavList: state => state.app.tagNavList
    }),
    columns () {
      return this[`${this.$route.params.menu}Columns`]
    },
    title () {
      const obj = {
        member: '会员资产明细',
        device: '硬件设备明细',
        sales: '销售核对明细'
      }
      return obj[this.$route.params.menu]
    },
    params () {
      return {
        startDate: this.$route.params.startTime,
        endDate: this.$route.params.endTime,
        shopIds: [this.$route.params.id]
      }
    }
  },
  beforeRouteEnter (to, from, next) {
    next(vm => {
      // 设置面包屑导航 tagNavList
      let tagNavList = cloneObj(vm.tagNavList)
      tagNavList.forEach(item => {
        if (item.name === vm.$route.name) {
          item.meta.title = vm.title
        }
      })
      vm.setTagNavList([...tagNavList])
    })
  },
  watch: {},
  async created () {
    this.getList()
    // console.log(this.$route.params)
  },
  mounted () { },
  methods: {
    ...mapMutations({
      setTagNavList: 'setTagNavList'
    }),
    async getList () {
      const obj = {
        member: coinMemberDetail,
        device: coinDeviceDetail,
        sales: coinSaleDetail
      }

      let params = {
        ...this.params,
        ...this.searchObj,
        ...this.page
      }
      // let testParams = {
      //   shopIds: ['0f3d3d93-cdea-443c-923d-e048b824232b', '4bf7aa74-70ed-4cbf-ba95-9d44f1f95167'],
      //   merchantId: '40ed3fb4-6b8a-4606-9cb3-a1e8bba5584b',
      //   offset: this.page.offset,
      //   limit: this.page.limit,
      //   startDate: '2019-01-01 00:00:00',
      //   endDate: '2019-12-31 00:00:00'
      // }
      const [err, res] = await errorCaptured(obj[this.$route.params.menu], params)
      if (err) return null
      if (res.data.status !== 200) return this.$Message.error(`${res.data.error}`)
      this.resData = res.data.data || []
      this.page.total = res.data.totalCount || 0
    },
    handlePage (val) {
      this.page[`offset`] = (val - 1) * this.page[`limit`]
      this.getList()
      // this.page.
      // this.searchObj.offset = (val - 1) * this.searchObj.limit
    },
    handlePageSize (val) {
      this.page[`limit`] = val
      this.search()
      // this.page[`offset`] = 0
    },

    async search () {
      // if (!this.searchObj.shopId.length) return this.$Message.error('请选择门店')
      this.page[`offset`] = 0
      this.page.pageINdex = 1
      this.getList()
      // const pai = {
      //   member: 'member',
      //   device: 'device',
      //   sales: 'sales'
      // }
    },
    // 店铺改变
    async handleShop () {
      // const ids = await this.$refs.vueTreeselectChoice.getShopId()
      // this.searchObj.shopId = ids
      this.search()
    },
    // 导出表格
    async exportExcl () {
      const name = {
        member: 'statShopAssetDetailDaily',
        device: 'statDeviceCoinDaily',
        sales: 'statShopSalesDetailDaily'
      }
      this.$refs.downCenterRef.addTask({
        merchantId: this.$store.state.user.merchantId,
        shopIds: this.params.shopIds,
        startDate: this.params.startDate,
        endDate: this.params.endDate,
        dateType: { year: 2, month: 1, date: 0 }[this.$route.params.dateType],
        taskModule: name[this.$route.params.menu]
      })
      // const obj = {
      //   member: coinMemberDetailExport,
      //   device: coinDeviceDetailExport,
      //   sales: coinSaleDetailExport
      // }
      // const name = {
      //   member: '会员资产游戏币流转差异明细表',
      //   device: '硬件设备游戏币流转差异明细表',
      //   sales: '销售核对游戏币流转差异明细表'
      // }

      // let params = {
      //   ...this.params,
      //   ...this.searchObj
      // }
      // let time = null
      // if (this.$route.params.dateType === 'date') {
      //   time = dayjs(this.params.startDate).format('YYYY-MM-DD')
      // } else if (this.$route.params.dateType === 'month') {
      //   time = dayjs(this.params.startDate).format('YYYY-MM')
      // }
      // const [err, res] = await errorCaptured(obj[this.$route.params.menu], params)
      // if (err) return null
      // // if (res.data.status !== 200) return this.$Message.error(`${res.data.error}`)
      // blobToXls(res.data, `${name[this.$route.params.menu]}(${time})`)
    }
  }
}
</script>
<style lang="less" scoped>
.gamecurrencydiff-detail {
  // .from {
  //   margin-top: 24px;
  // }
  .gamecurrencydiff-detailt-edit {
    padding-top: 20px;
    padding-left: 20px;
    padding-right: 20px;
    margin-bottom: -4px;
  }
  .button_active {
    border: 1px solid #2d8cf0;
  }
  .list-title {
    display: flex;
    height: 100%;
    align-items: center;
    // height: 33px;
    line-height: 33px;
    span {
      height: 20px;
      width: 8px;
      background: #2d8cf0;
      margin-right: 15px;
    }
  }
  .ivu-radio-group-button .ivu-radio-wrapper-checked {
    background: #2d8cf0;
    color: #fff;
  }
}
</style>
